/* 定义不同主题变量
 -------------------- */
:root {
  /* font */
  --font-size-small: 12px;
  --font-size-base: 14px;
  --font-size-medium: 16px;

  /* color */
  --primary-color: #3178fc;
  --primary-color-rgba1: rgba(49, 120, 252, 0.1);
  --primary-color-rgba2: rgba(49, 120, 252, 0.2);
  --primary-color-rgba3: rgba(49, 120, 252, 0.3);
 
  --color-white: white;
  --color-white-light: #f3f5f7;
  --color-dark-light: #333;
  --color-dark-light1: #282b32;
  --color-gray: #c4c4c4;
  --color-gray-light: #666;
  --color-green-light: #2eb4b5;
  --color-primary: #167dff;
  --color-success: #4dbb5f;
  --color-danger: #f56c6c;

  /* scrollbar */
  --scrollbar-width: 8px;
  --mainnav-width: 68px;
}

[data-theme='light'] {
  /* color */
  --color-base: var(--color-dark-light);
  --color-1: #1e3352;
  --color-2: #6e6e6e;

  /* background */
  --background-color-base: white;
  --background-color-1: var(--color-white-light);

  /* border */
  --border-color: #ddd;

  /* mainnav */
  --mainnav-background-color: #072245;
  --mainnav-color: #6a7a8f;
  --mainnav-active-color: white;

  /* menu */
  --menu-background-active-color: #3c587d;
  --menu-text-color: #d1d8e0;
  --menu-text-active-color: white;
  --line-background-color: #979797;
  --box-shadow-color: #191b2566;

  /* table */
  --table-background: white;
  --table-background-striped: #f6f6f6;
  --table-color: #333;
  --table-border: rgba(22, 125, 255, 0.15);

  /* scrollbar */
  --scrollbar-thumb-background: rgba(216, 216, 216, 1);
  --scrollbar-track-background: rgba(216, 216, 216, 0.37);

  /* pagination */
  --pagination-text-color: #333;
  --pagination-total-color: #333;
  --pagination-prve-next-background-color: #c4c4c4;

  /* messageBox */
  --messagebox-background-color: var(--color-white);
  --messagebox-title-color: var(--color-dark-light);
  --messagebox-message-color: var(--color-gray-light);
  --messagebox-cancel-color: var(--color-primary);
  --messagebox-cancel-background-color: #ebf4ff;
  --messagebox-cancel-hover-background-color: #f3f8ff;

  /* popper */
  --popper-color: var(--color-base);
  --popper-background-color: var(--background-color-base);
  --popper-background-color-active: var(--background-color-1);

  /* tabs */
  --tab-color: #333;
  --tab-item-color: #ebf4ff;
  --tab-item-active-color: var(--color-primary);
  --tab-background-color: #f0f0f0;
  --tab-form-background-inner: #fff;
  --tab-form-color: #333;

  /* dialog - drawer */
  --dialog-background-color: var(--color-white);
  --dialog-drawer-background-color: var(--color-white);
  --dialog-drawer-title-color: var(--color-dark-light);
  --dialog-drawer-cancel-color: var(--color-primary);
  --dialog-drawer-cancel-background-color: #ebf4ff;
  --dialog-drawer-cancel-hover-background-color: #f3f8ff;
  --dialog-drawer-form-background-inner: #f0f0f0;
  --descriptions-background: var(--form-background-inner);
  --card-active-background: #e0eeff;
  --card-hover-background: #e8f2ff;

  // dialog
  --dialog-bg: #fff;
  --dialog-color: #333;
  --dialog-border-color: #d5d5d5;
  --dialog-header-bg: #f0f3fa;
  --dialog-shadow-color: #cfd6ed;
  --dialog-footer-bg: #fcfcfc;
  --dialog-footer-border-color: #ddd;
}

[data-theme='dark'] {
  /* color */
  --color-base: var(--color-white);

  /* background */
  --background-color-base: #282b32;
  --background-color-1: #3d4049;

  /* menu */
  --menu-background-color: #282b32;
  --menu-background-active-color: #202228;
  --menu-text-color: #bfcbd9;
  --menu-text-color-hover: #409eff;
  --menu-text-color-active: #409eff;
  --submenu-background-color: #4e5262;
  --submenu-background-hover-color: #3e424e;
  --submenu-background-active-color: var(--color-primary);
  --submenu-text-color: white;
  --submenu-text-color-active: white;
  --line-background-color: #666;
  // --box-shadow-color: #3d4049a6;
  --box-shadow-color: #191b2566;

  /* table */
  --table-background: #282b32;
  --table-background-striped: #3d4049;
  --table-color: #fff;

  /* scrollbar */
  --scrollbar-thumb-background: rgba(119, 119, 119, 1);
  --scrollbar-track-background: rgba(119, 119, 119, 0.37);

  /* pagination */
  --pagination-text-color: white;
  --pagination-total-color: white;
  --pagination-prve-next-background-color: #3d4049;

  /* messageBox */
  --messagebox-background-color: #3d4049;
  --messagebox-title-color: var(--color-white);
  --messagebox-message-color: var(--color-white);
  --messagebox-cancel-color: var(--color-gray);
  --messagebox-cancel-background-color: #282b32;
  --messagebox-cancel-hover-background-color: #30333b;

  /* popper */
  --popper-color: var(--color-base);
  --popper-background-color: var(--background-color-base);
  --popper-background-color-active: var(--background-color-1);

  /* tabs */
  --tab-color: #c4c4c4;
  --tab-item-color: #4e5262;
  --tab-item-active-color: var(--color-primary);
  --tab-background-color: #3d4049;
  --tab-form-background-inner: var(--color-dark-light1);
  --tab-form-color: #fff;

  /* dialog - drawer */
  --dialog-background-color: var(--color-dialog);
  --dialog-drawer-background-color: var(--color-dark-light1);
  --dialog-drawer-title-color: var(--color-white);
  --dialog-drawer-cancel-color: var(--color-gray);
  --dialog-drawer-cancel-background-color: #3d4049;
  --dialog-drawer-cancel-hover-background-color: #30333b;
  --dialog-drawer-form-background-inner: var(--color-dark-light1);
  --descriptions-background: var(--color-dark-light1);

  // dialog
  --dialog-bg: var(--main-bg);
  --dialog-color: #fff;
  --dialog-border-color: #d5d5d5;
  --dialog-header-bg: var(--main-bg);
  --dialog-shadow-color: #040617;
  --dialog-footer-bg: #0f154d;
  --dialog-footer-border-color: #ddd;
}
